<template>
<div>
  <el-row id="artList" type="flex" justify="space-around">
    <el-col :span="16">
      <el-row v-show="!show">
        <el-col :span="16"><span>很抱歉,未能搜索到您所需要的内容!</span></el-col>
      </el-row>
      <el-row v-show="show" class="art-item" v-for="(item, key) in Results" :key="key">
        <el-card shadow="hover">
          <h5 v-show="type=='1'?true:false">
            <router-link :to="'/newsdetail/id/'+item.id+'/newsType/'" tag="span" class="art-title"><span v-html="item.title"></span></router-link>
          </h5>
          <h5 v-show="type=='2'?true:false">
            <router-link :to="'/newsdetail/id/'+item.id+'/newsType/'" tag="span" class="art-title"><span v-html="item.title"></span></router-link>
          </h5>
          <h5 v-show="type=='3'?true:false">
            <router-link :to="'/policyDetail/'+item.id" tag="span" class="art-title"><span v-html="item.title"></span></router-link>
          </h5>
          <h5 v-show="type=='4'?true:false">
            <router-link :to="'/forumDetails/'+item.id" tag="span" class="art-title"><span v-html="item.title"></span></router-link>
          </h5>
          <el-row style="display: flex" class="art-info d-flex align-items-center justify-content-start">
            <div class="art-author"><i class="el-icon-user-solid"></i>: {{item.author}}</div>
            <div v-show="item.pubtime==null?false:true" class="art-time">
                <i class="el-icon-time"></i>：{{item.pubtime}}
            </div>
          </el-row>
          <el-row class="art-body">
            <div v-show="item.img==null?false:true" class="side-img hidden-sm-and-down">
                <img class="art-banner" :src="item.img">
            </div>
            <div class="side-abstract">
              <div class="art-abstract">
                  {{item.description == null ? "" : item.description}}
              </div>
              <div class="art-more">
                <el-button plain>阅读全文</el-button>
              </div>
            </div>
          </el-row>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  data () {
    return {
      Results: [],
      type: this.$route.params.type,
      keyword: this.$route.params.keyword,
      show: false
    }
  },
  methods: {
    getResult (types, keyword) {
      this.$axios.get('search/' + types, {
        params: {
          keyword: keyword,
          from: 0,
          size: 30
        }
      }).then(response => {
        console.log(response.data.data)
        this.$set(this, 'Results', response.data.data)
        if (response.data.code === '200') {
          this.$set(this, 'show', true)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    if (this.$route.params.type === '1') {
      this.getResult('work_news', this.$route.params.keyword)
    } else if (this.$route.params.type === '2') {
      this.getResult('business_news', this.$route.params.keyword)
    } else if (this.$route.params.type === '3') {
      this.getResult('policy', this.$route.params.keyword)
    } else if (this.$route.params.type === '4') {
      this.getResult('forums', this.$route.params.keyword)
    }
  },
  watch: {
    $route: function (newUrl, oldUrl) {
      if (newUrl !== oldUrl) {
        if (this.$route.params.type === '1') {
          this.getResult('work_news', this.$route.params.keyword)
        } else if (this.$route.params.type === '2') {
          this.getResult('business_news', this.$route.params.keyword)
        } else if (this.$route.params.type === '3') {
          this.getResult('policy', this.$route.params.keyword)
        } else if (this.$route.params.type === '4') {
          this.getResult('forums', this.$route.params.keyword)
        }
      }
    }

  }
}
</script>

<style lang="less" scoped>
#side .item {margin-bottom: 30px;}
#artList{
  margin-top: 20px
}
.art-item {
  margin-bottom: 30px;
  margin-right: 200px;
  position: relative;
  width: 900px;
}

img.tag {
width: 16px;
height: 16px;
}

.art-title {
border-left: 3px solid #F56C6C;
padding-left: 5px;
cursor: pointer;
}
.art-title:hover {
padding-left: 10px;
color: #409EFF;
}
.art-time {
margin-bottom: 5px;
}
.art-author {
margin-right: 20px;
}
art-classification{
  margin-right: 20px;
}
.art-source{
  margin-left: 20px;
  height: 10px;
}
.art-body {
display: flex;
padding: 10px 0;
}
.side-img {
height: 150px;
width: 270px;
overflow: hidden;
margin-right: 10px;
}

img.art-banner {
width: 100%;
height: 100%;
transition: all 0.6s;
}
img.art-banner:hover {
transform: scale(1.4);
}

.side-abstract {
flex: 1;
display: flex;
flex-direction: column;
}
.art-abstract {
flex: 1;
color: #aaa;
}
.art-more {
height: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.art-more .view {
color: #aaa;
}
.art-more .like {
color: #aaa;
}
h5{
font-size: 18px;
}
.pagination {
background-color: #F9F9F9;
}
.log_change{
  display: inline-block;
  width: 50px;
  height: 40px;
  margin-top: 10px;
}
</style>
